<!--素材管理-->
<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 0;">
      <div style="padding: 16px 16px 12px 16px">
        <file-toolbar
          :directorys="directorys"
          :grid.sync="grid"
          :checked="checked"
          :parentId="parentId"
          :typeId="typeId"
          @done="onDone"
        />
        <file-header
          :total="total"
          :directorys="directorys"
          @update:directorys="updateDirectorys"
        />
      </div>
      <div v-loading="loading">
<!--    文件夹list-->
        <!-- typeId  1:视频 2:音频 3:台本 4:图片 -->
        <file-list
          :directorys="directorys"
          :typeId="typeId"
          :grid="grid"
          :data="data"
          :sort="sort"
          :order="order"
          :parentId="parentId"
          :search="search"
          :checked.sync="checked"
          @sort-change="onSortChange"
          @go-directory="onGoDirectory"
          @done="onDone"
        />
      </div>

    </el-card>
  </div>
</template>

<script>
  import FileToolbar from './components/file-toolbar.vue';
  import FileHeader from './components/file-header.vue';
  import FileList from './components/file-list.vue';
  import { listUserFiles,publicFile,getFileAll,getTxtAll } from '@/api/creatCenter/material';

  export default {
    name: 'index',
    components: { FileToolbar, FileHeader, FileList },
    data() {
      return {
        typeId:0,
        // 加载状态
        loading: true,
        // 文件列表数据
        data: [],
        // 排序字段
        sort: '',
        // 排序方式
        order: '',
        // 选中数据
        checked: [],
        // 文件夹数据
        directorys: [],
        // 总文件数
        total: 0,
        // 是否网格展示
        grid: true,
        // 父级 id
        parentId: 0,
        search:'',
        //获取用户名
        username:this.$store.state.user.info.username
      };
    },
    created() {
      console.log("this.$store.state.user",this.$store.state.user)
      console.log("search==================",this.search)
      this.query();
    },
    methods: {
      /* 查询文件列表 */
      async query() {
        this.data = [];
        this.checked = [];
        this.loading = true;
        //用户所创建的文件
        let userData = await listUserFiles({
          name:this.search,
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.username,
          //父级目录：初次传0
          parentId: this.parentId
        })
        console.log(userData)
        let pubData = [] //文件夹
        let allFile = [] //文件
        let allTxt = []  //台本
        if (this.parentId == 0) {
          pubData = await publicFile()
        }
        else{
          //根据条件获取所有文件
          allFile = await getFileAll({
            folderId: this.parentId,
            username: this.username
          })
          console.log("allFile",allFile)
          if(this.typeId==3){
            allTxt = await getTxtAll({
              folderId: this.parentId,
              username: this.username
            })
          }
        }

        //es6支持...数组合并
        let data  = [...pubData, ...userData,...allFile,...allTxt];
        console.log(data)
          this.data = data.map((d) => {
            // console.log("进入文件夹测试展示ddddddddddd", d)
            // 为公共文件夹时展示
            // isCommon:是否公共文件夹  0否，1是
            // isDirectory:1文件夹 否则非文件夹
            if(d.isDirectory==1 && d.isCommon==1){
              // let url = 'https://z4a.net/images/2023/08/18/Group-263950b924336c666948.png'
              var host =window.location.protocol + '//' + window.location.host;
              let url = host+'/ele-file-list/ic_public_folder.png'
              // let url = 'http://localhost:8080/ele-file-list/ic_public_folder.png'
              this.$set(d,'thumbnail', url)
            }
            // typeId  1:视频 2:音频 3:台本 4:图片
            // 添加图片缩略图 typeId:4 图片
            if(d.url && this.typeId==4){
              this.$set(d,'thumbnail',d.url)
            }
            if(d.url && this.typeId==1){
              console.log("视频d.url====", d.url.split('.mp4')[0])
              let videoUrl = d.url.split('.mp4')[0] + '.mp4'
              this.$set(d,'thumbnail',videoUrl + "?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast")
            }
            // 将文件名称，从名称+时间戳+后缀，转为名称+后缀,名称修改
            if(d.name){
              let filename=d.name
              if(d.isDirectory != 1){
                let markIndex = (filename).lastIndexOf('.');
                let suffix = filename.substring(markIndex)  // 图片后缀
                this.$set(d,'name',filename.split('.')[0]+suffix)
              }
            }

            return Object.assign({ name: d.name }, d, {
              // isDirectory: true, //代表是文件夹
              isDirectory: d.isDirectory === 1 ? true : false,
              length: this.formatLength(d.length)
            })
          })
        this.loading = false;
        this.total = data.length;
      },
      /* 刷新列表数据 */
      onDone() {
        this.query();
      },
      /* 文件列表排序方式改变 */
      onSortChange(option) {
        this.order = option.order;
        this.sort = option.sort;
        this.query();
      },
      /* 进入文件夹 */
      onGoDirectory(item) {
        this.typeId=item.type;
        console.log("进入文件夹",item)
        this.updateDirectorys([...this.directorys, item]);
      },
      /* 更新文件夹数据 */
      updateDirectorys(values) {
        this.directorys = values;
        // 修改 type类型id，当this.directorys.length<=0是文件夹，以免进入其他文件被更改typeId
        if(this.directorys.length<=0){
          this.typeId=0;
        }
        console.log("values=======",values)
        this.parentId = this.directorys[this.directorys.length - 1]?.id ?? 0;
        console.log('更新文件夹数据========',this.typeId)

        this.query();
      },
      /* 格式化文件大小 */
      formatLength(length) {
        if (length == null) {
          return '-';
        }
        if (length < 1024) {
          return length + 'B';
        } else if (length < 1024 * 1024) {
          return (length / 1024).toFixed(1) + 'KB';
        } else if (length < 1024 * 1024 * 1024) {
          return (length / 1024 / 1024).toFixed(1) + 'M';
        } else {
          return (length / 1024 / 1024 / 1024).toFixed(1) + 'G';
        }
      }
    }
  };
</script>

